<template>
  <div class="container" ref="con">
    <div class="htext" ref="target">
      <span v-if="isClick">点击了目标元素</span>
      <span v-else>未点击目标元素</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'outsideTarget addEventListen',
  data () {
    return {
      isClick: false
    }
  },
  mounted () {
    document.addEventListener('click', (e) => this.clinkTarget(e))
  },
  methods: {
    clinkTarget (e) {
      const isInTarget = e.path.some(item => item === this.$refs.target)
      this.isClick = isInTarget
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;

  .htext {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
}

</style>
